<template>
  <div class="">
    <van-cell
      @click="$emit('search', s)"
      v-for="(s, i) in list"
      :key="i"
      icon="search"
    >
      <span slot="title" v-html="highLight(s)"></span>
    </van-cell>
  </div>
</template>

<script>
// 导入 api 方法
import { getSearchSuggestion } from '@/api/search.js'
// 导入 lodash 内置的 防抖函数
import { debounce } from 'lodash'

export default {
  name: 'SearchSuggestion',
  props: {
    // 关键字-----------
    searchKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 搜索建议数组
      list: []
    }
  },
  created() {},
  methods: {
    // 1.根据关键字 获取 搜索建议 ---------------------------
    async getSug(val) {
      // a.获取 服务器端 搜索建议数据
      const { data: body } = await getSearchSuggestion(val)
      // b.将 数据 提供给视图 渲染使用
      //   由于 服务器 没有查询到 建议时 ， 会返回一个 [null] 数组
      //   所以，需要对 第0个元素 做为空判断
      this.list = body.data.options[0] ? body.data.options : []
    },
    // 2.增加 高亮标签 给关键字 -----------------------------
    highLight(oriStr) {
      // oriStr -> 关键字 -> 用标签包裹住  'abAca'.replace(/a/ig,'x') -> 'xbxcx'
      // a.准备 正则
      const r = new RegExp(this.searchKey, 'ig') // -> /searchKey/ig
      // b.准备 新字符串（用来替换 关键字）
      const strKey = `<span class="keyword">${this.searchKey}</span>`
      // c.执行 全局 忽略大小写 替换，覆盖原来字符串
      oriStr = oriStr.replace(r, strKey)
      // d.返回新字符串
      return oriStr
    }
  },
  // beforeCreate
  // created
  computed: {},
  watch: {
    // 侦听传入的 搜索关键字
    searchKey: {
      handler: debounce(function (val) {
        this.getSug(val)
      }, 1000), // 绑定一个 创建的 防抖函数
      immediate: true
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
/deep/ .keyword {
  color: red;
  font-weight: bolder;
}
</style>
